<template>
  <div class="dialog-box">
    <el-dialog v-model="dialogVisible" width="800">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="活动详情" />
        <el-step title="提交申请" />
        <el-step title="完成提交" />
      </el-steps>
      <template v-if="active === 1">
        <h4 style="text-align: center; margin-top: 20px">2023天猫双11报名规则</h4>
        <VuePdfEmbed
          annotation-layer
          text-layer
          :source="'http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E5%8D%8F%E8%AE%AE/%E5%8A%A3%E8%BD%A6%E5%AE%9D%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96/bumyg%E5%8A%A3%E8%BD%A6%E5%AE%9D%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.pdf?Expires=2027300758&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=227pjKbNLMCZ2RlzUioTRkPqSPc%3D'" />
        <!-- <el-card>
                    一、活动节奏 活动整体分为三波，第一波为“淘宝双11抢先购”，第二波为“淘宝双11好价节”，第三波为“淘宝双11狂欢日”。
                    为向买家提供双11全波段好价商品和省心安心服务，天猫联合淘宝在双11主体活动同期组织“双11天天低价”活动（与主体活动并行），参加“双11天天低价”活动可享受专属资源扶持，具体报名及活动要求详见“九、双11天天低价分支活动招商规则”。（一）报名时间
                    1.卖家报名 2023年09月28日12:00:00-2023年11月11日23:59:59 2.商品报名 （1）抢先购：2023年10月04日12:00:00-2023年11月03日23:59:59
                    （2）好价节：2023年10月04日12:00:00-2023年11月08日23:59:59 （3）狂欢日：2023年10月04日12:00:00-2023年11月11日23:59:59 温馨提示：
                    （1）活动正式开始前2小时和活动正式开始1.5小时内暂停卖家和商品报名。 （2）本次报名分“卖家报名”和“商品报名”两个环节。 所有活动报名必须先提交“卖家报名”通过后才能提交“商品报名”。
                    请务必严格按照报名时间节点进行操作，逾期将无法进行补报。卖家报名时间以本规则说明为准。 （二）活动时间 1.抢先购
                    （1）活动预热：2023年10月29日00:00:00-2023年10月31日19:59:59 （2）正式活动：2023年10月31日20:00:00-2023年11月03日23:59:59
                    2.好价节无预热期，正式活动：2023年11月04日00:00:00-2023年11月08日23:59:59 3.狂欢日
                    （1）活动预热：2023年11月09日00:00:00-2023年11月10日19:59:59 （2）正式活动：2023年11月10日20:00:00-2023年11月11日23:59:59
                </el-card> -->
      </template>
      <template v-if="active === 2">
        <h4 style="text-align: center; margin-top: 20px">2023天猫双11报名规则</h4>
        <el-form :model="formInline" class="demo-form-inline" label-position="top">
          <el-form-item class="mt20"><el-input disabled placeholder="基础信息" /></el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动名称">
                  <el-input v-model="formInline.name" placeholder="Activity name" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动类型">
                  <el-input v-model="formInline.name" placeholder="Activity name" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-date-picker
              v-model="formInline.startTime"
              type="datetimerange"
              range-separator="To"
              start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </el-form-item>
          <el-form-item label="活动商品">
            <el-radio-group v-model="formInline.radio" style="width: 100%; justify-content: space-between">
              <el-radio :label="0">全部商品</el-radio>
              <el-radio :label="1">部分商品</el-radio>
              <el-button type="primary" plain :icon="Plus" @click="">添加商品</el-button>
            </el-radio-group>
            <el-table
              :data="formInline.commodityList"
              style="width: 100%"
              border
              class="mt20"
              :show-overflow-tooltip="true">
              <el-table-column prop="number" label="商品编号" />
              <el-table-column prop="name" label="商品名称" />
              <el-table-column prop="inventory" label="库存" />
              <el-table-column label="售价">
                <template #default="props">
                  {{ Number(props.row.price).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column label="优惠">
                <template #default="props">
                  <el-input v-model="props.row.preferential" placeholder="请输入" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="active === 3">
        <el-result
          icon="success"
          title="提交成功"
          sub-title="您提交的活动资料将会在3-5个工作日内审核完毕，结果将以系统通知的形式发送给您， 你也可以通过“商城-活动管理”查看">
          <template #extra>
            <el-button type="primary">确定</el-button>
          </template>
        </el-result>
      </template>
      <template #footer v-if="active !== 3">
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleEnlist"> 报名 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// essential styles
import VuePdfEmbed from 'vue-pdf-embed';
// import 'vue-pdf-embed/dist/style/index.css'
import {ref, onMounted} from 'vue';
import {Plus} from '@element-plus/icons-vue';
console.log(VuePdfEmbed);
const dialogVisible = defineModel<boolean>();
const active = ref(1);
const handleEnlist = () => {
  active.value += 1;
};
const formInline = ref({
  region: '',
  date: '',
});
const handleCancel = () => {
  active.value === 1 ? 1 : (active.value -= 1);
};
</script>

<style scoped lang="scss">
.dialog-box {
  :deep(.el-dialog__header) {
    display: none;
  }
}
</style>
